<template>
  <div class="fillcontain">
    <head-top></head-top>
    <div class="table_container">
      <el-input v-model="input" class="searchInput" @change="search()" placeholder="请输入用户名关键字"></el-input>
      <el-table v-if="!isSearch" :data="tableData" style="width: 100%">
        <el-table-column label="用户名" prop="name"> </el-table-column>
        <el-table-column label="姓名" prop="nickname"> </el-table-column>
        <!-- <el-table-column label="电话" prop="phone"> </el-table-column> -->
        <el-table-column label="是否已开启签到" prop="status"> </el-table-column>
        <el-table-column label="学生是否已签到" prop="isSign"> </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >设置签到</el-button
            >
          </template>
        </el-table-column>
      </el-table>
       <el-table v-if="isSearch" :data="searchData" style="width: 100%">
        <el-table-column label="用户名" prop="name"> </el-table-column>
        <el-table-column label="姓名" prop="nickname"> </el-table-column>
        <!-- <el-table-column label="电话" prop="phone"> </el-table-column> -->
        <el-table-column label="是否已开启签到" prop="status"> </el-table-column>
        <el-table-column label="学生是否已签到" prop="isSign"> </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >设置签到</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="签到状态" v-model="dialogFormVisible" class="dial">
        <div>
          当前签到状态：{{ selectTable.statusFlag == true ? "已开启签到" : "未开启签到" }}
        </div>
        <div>
          操作：
          <el-switch
            v-model="selectTable.statusFlag"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </div>
        <div class="buttonBox">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateSign">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import headTop from "../components/headTop";
import { getResturantsCount, getAllUser, setUserSign } from "@/api/getData";
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      selectTable: {},
      dialogFormVisible: false,
      categoryOptions: [],
      selectedCategory: [],
      address: {},
      value: true,
      input: "",
      isSearch: false,
      searchData: [],
    };
  },
  created() {
    this.getResturants();
  },
  components: {
    headTop,
  },
  methods: {
    async initData() {
      try {
        // this.city = await cityGuess();
        const countData = await getResturantsCount();
        if (countData.status == 1) {
          this.count = countData.count;
        } else {
          throw new Error("获取数据失败");
        }
        this.getResturants();
      } catch (err) {
        console.log("获取数据失败", err);
      }
    },

    async getResturants() {
      let res = await getAllUser();
      if (res.data.code == 200) {
        this.tableData = [];
        res.data.data.map((item) => {
          let tableData = {};
          tableData.name = item.username;
          tableData.nickname = item.nickname;
          if (item.status == 1) {
            tableData.status = "是";
            tableData.statusFlag = true;
          } else {
            tableData.status = "否";
            tableData.statusFlag = false;
          }
          if (item.isSign == 1) {
            tableData.isSign = "已签到";
          } else {
            tableData.isSign = "暂未签到";
          }
          this.tableData.push(tableData);
        });
      } else {
        this.$message({
          type: "error",
          message: res.data.msg,
        });
      }
    },
    async handleEdit(index, row) {
      this.selectTable = row;
      // console.log(this.selectTable.status);
      // console.log(row);
      this.dialogFormVisible = true;
    },

    async updateSign() {
      this.dialogFormVisible = false;
      console.log(this.selectTable.statusFlag, this.selectTable);
      let params = new URLSearchParams();
      params.append("username", this.selectTable.name);
      if (this.selectTable.statusFlag == true) {
        params.append("status", 1);
        params.append("isSign", 0);
      } else {
        params.append("status", 0);
        params.append("isSign", 0);
      }
      let res = await setUserSign(params);
      let { code, msg } = res.data;
      if (code == 200) {
        this.$message({
          type: "success",
          message: msg,
        });
        this.getResturants();
      } else {
        this.$message({
          type: "error",
          message: msg,
        });
      }
    },
    search() {
      
      this.$nextTick(() => {
        this.searchData=[]
        if (this.input == "") {
          console.log(this.input);
          this.isSearch = false;
          return;
        } else {
          this.isSearch = true;
          this.tableData.map((item, i) => {
            if (item.name.indexOf(this.input) > -1) {
              this.searchData.push(item);
            }
          });
          console.log(this.searchData);
        }
      });
    },
  },
};
</script>

<style lang="less">
@import "../style/mixin";
.el-dialog__body {
  > div {
    margin: 20px 0;
  }
}
.buttonBox {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.table_container {
  padding: 20px;
}
.Pagination {
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
.searchInput{
  width: 240px;
  margin: 20px auto;
}
</style>
